<template>
  <div v-loading="loading">
    <el-table :data="list" border stripe style="width: 100%" size="small" element-loading-text="加载中" empty-text="暂无数据">
      <el-table-column prop="createTime" label="时间" />
      <el-table-column prop="customerName" label="用户" />
      <el-table-column prop="categoryName" label="是否会员">
        <template slot-scope="scope">
          <span v-if="scope.row.categoryId&&scope.row.categoryName">{{ scope.row.categoryName }}</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.success" type="success" effect="dark" size="small">成功</el-tag>
          <el-tag v-else type="danger" effect="dark" size="small">失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="message" label="备注" />
      <el-table-column prop="desc" label="行为" />
      <!-- <el-table-column prop="theme" label="是否分享" fixed></el-table-column> -->

    </el-table>
    <!-- 分页 -->
    <pagination-direction v-if="paginationConfig.total!==0" :config="paginationConfig" @sizeschange="sizesChange" @pagechange="pageChange" />
  </div>
</template>

<script>
import { getActivityRecords } from '@/api/marketing'
export default {
  props: {
    activityDetail: {
      require: true
    }
  },
  data() {
    return {
      // 配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      // 状态
      loading: false,
      // 数据
      listFilterForm: {
        activityId: ''
      },
      list: []
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
    this.fetchData()
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    // 获取统计
    // 获取列表
    fetchData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      this.loading = true
      // 加入page
      this.listFilterForm.page = page
      this.listFilterForm.pageSize = pageSize
      this.listFilterForm.activityId = this.activityDetail.id
      const params = Object.assign({}, this.listFilterForm)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      getActivityRecords(params)
        .then((res) => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },

    // 分页page改变
    pageChange() {
      this.fetchData()
    }
    /**
     * 按钮组
     */
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/* 统计 */
.total-container {
  .marketing-card {
    .cell-item {
      display: flex;
      .label {
        flex: 0 0 160px;
        color: #888888;
        text-align: center;
      }
      .item {
        flex: 1 1 auto;
        color: #000000;
        font-weight: bold;
      }
    }
    .cell-item:not(:last-child) {
      margin-bottom: 10px;
    }
  }
}
</style>
